<template>
  <div class="zreo">
    <div class="one">
      <div class="two">
        <router-link
          style="color: black; text-decoration: none; margin-right: 20px"
          to="/login"
          >游客登录</router-link
        >
        <router-link to="/login"
          ><i class="el-icon-mobile-phone"></i
        ></router-link>
      </div>
    </div>
    <div class="three">
      <div class="four">
        <span><img src="../assets/logo.png" alt="" /></span>
        <span>
          <el-input
            style="width: 250px"
            placeholder="请输入内容"
            v-model="input"
            clearable
          >
          </el-input>
          <el-button icon="el-icon-search">搜索</el-button>
        </span>
        <span><i class="el-icon-phone-outline">0945-21376498</i></span>
      </div>
    </div>
    <div class="five">
      <div class="six">
        <!-- 面包屑导航 -->
        <el-breadcrumb
          style="float: left; margin-top: 8px; margin-left: 10px"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'List' }"
            >景区列表</el-breadcrumb-item
          >
          <el-breadcrumb-item>景区详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 景区简介 -->
      <div class="seven" v-for="item in laojunshan" :key="item.key">
        <ul>
          <li>
            <img
              style="width: 600px; margin-left: 20px; margin-top: 20px"
              :src="item.t_tupian"
              alt=""
            />
          </li>
        </ul>
        <ul>
          <li style="font-size: 30px; margin-top: 40px">{{ item.t_title }}</li>
          <li style="margin-top: 30px">{{ item.t_tit }}</li>
          <li style="margin-top: 30px">开放时间:</li>
          <li style="margin-top: 30px">景区地址:</li>
          <li style="margin-top: 30px">景区简介:</li>
          <li style="margin-top: 90px">
            <span style="color: red">{{ item.t_pay }}</span
            >人购买
          </li>
        </ul>
        <ul>
          <li style="margin-top: 100px">
            <span style="color: red">{{ item.t_ti }}</span
            >级景区
          </li>
          <li style="margin-top: 30px; margin-left: -130px">
            {{ item.t_time }}
          </li>
          <li style="margin-top: 30px; margin-left: -130px">
            {{ item.t_address }}
          </li>
          <li
            style="
              margin-top: 25px;
              margin-left: -130px;
              width: 400px;
              line-height: 25px;
            "
          >
            {{ item.t_ioss }}
          </li>
        </ul>
        <ul style="margin-top: 50px">
          <li>
            ￥<span style="color: red; font-size: 30px">&nbsp;40&nbsp;</span>起
          </li>
          <li style="margin-top: 20px">
            <span style="color: red">14542</span>条评论
          </li>
        </ul>
      </div>
    </div>
    <div class="eight">
      <div class="nine">
        <div class="biao">
          <span id="men">
            <button class="btn"><a href="#men">门票预订</a></button>
            <button class="btn"><a href="#bg">预订须知</a></button>
            <button class="btn"><a href="#bi">景点简介</a></button>
            <button class="btn"><a href="#bj">交通指南</a></button>
            <button class="btn"><a href="#bl">游客评价</a></button>
          </span>
        </div>
        <div class="eleven">
          <p style="font-size: 17px; margin-left: 20px; margin-top: 8px">
            一级索道票（中灵索道或云景索道）,可通用
          </p>
        </div>
        <div class="ba">
          <div class="bb">
            <span style="margin-right: 200px">票型名称</span>
            <span>门市价</span>
            <span>优惠价</span>
            <span>订票</span>
          </div>
          <div class="bc">
            <span>老君山一级索道单上（云景索道或中灵索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="dialogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于一级索道（中灵索道或云景索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 62px">￥70</span>
            <span style="margin-left: 185px">￥70</span>
            <span class="bd" style="margin-left: 175px"
              ><button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
          <div class="bc">
            <span>老君山一级索道单下（云景索道或中灵索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="dialogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于一级索道（中灵索道或云景索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 62px">￥65</span>
            <span style="margin-left: 185px">￥65</span>
            <span class="bd" style="margin-left: 175px">
              <button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
          <div class="bc">
            <span>老君山一级索道往返（云景索道或中灵索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="dialogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于一级索道（中灵索道或云景索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 62px">￥130</span>
            <span style="margin-left: 176px">￥130</span>
            <span class="bd" style="margin-left: 167px"
              ><button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
        </div>
        <div class="eleven">
          <p style="font-size: 17px; margin-left: 20px; margin-top: 8px">
            二级索道票（峰林索道）
          </p>
        </div>
        <div class="ba">
          <div class="bb">
            <span style="margin-right: 200px">票型名称</span>
            <span>门市价</span>
            <span>优惠价</span>
            <span>订票</span>
          </div>
          <div class="bc">
            <span>老君山二级索道单上（峰林索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="erlogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="erlogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于二级索道（峰林索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="erlogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="erlogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 141px">￥45</span>
            <span style="margin-left: 186px">￥45</span>
            <span class="bd" style="margin-left: 175px"
              ><button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
          <div class="bc">
            <span>老君山二级索道单下（峰林索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="erlogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="erlogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于二级索道（峰林索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="erlogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="erlogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 141px">￥40</span>
            <span style="margin-left: 186px">￥40</span>
            <span class="bd" style="margin-left: 175px"
              ><button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
          <div class="bc">
            <span>老君山二级索道往返（峰林索道）</span>
            <span style="color: blue"
              ><el-button type="text" @click="erlogVisible = true"
                >查看详情</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="erlogVisible"
                width="40%"
                :before-close="handleClose"
              >
                <span style="line-height: 30px">
                  1、该票仅用于二级索道（峰林索道）往返使用；<br />
                  2、该票仅可使用一次；<br />
                  3、该票核销后不可退票；<br />
                  4、购票时请正确填入游玩人身份证件信息；<br />
                  5、请刷票时出示自己的身份证或二维码。</span
                >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="erlogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="erlogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog></span
            >
            <span style="margin-left: 141px">￥80</span>
            <span style="margin-left: 186px">￥80</span>
            <span class="bd" style="margin-left: 175px"
              ><button>
                <router-link to="/Dingdan">预订</router-link>
              </button></span
            >
          </div>
        </div>
      </div>
      <div class="ten">
        <p class="be">热门推荐</p>
      </div>
    </div>
    <div class="bf">
      <div class="bg">
        <p
          style="
            font-family: 微软雅黑, Microsoft YaHei;
            font-size: 21px;
            line-height: 40px;
            color: red;
          "
          id="bg"
        >
          预订须知
        </p>
        <span
          style="
            font-family: 微软雅黑, Microsoft YaHei;
            font-size: 17px;
            line-height: 30px;
            color: grey;
          "
          >老君山全年免门票公告<br />一直以来老君山景区对以下群体终身免门票（老君山门票门市价100元/人）：<br />1、1.4米（含1.4米）以下儿童门票、索道全免；<br />2、12周岁（含12周岁）以下儿童免门票；<br />3、持士兵证、军官证、残疾军人证等有效证件的现役军人、残疾军人免门票<br />4、残疾人凭残疾证免门票<br />5、视力、智力残疾人和一级二级肢体残疾人的一名陪护人员免门票；<br />6、大中小学学生集体参观爱国主义教育基地的学生群体免门票；<br />7、持居士证、皈依证的信教群众免门票。<br />2020年老君山免门票群体<br />1、由原来65周岁及以上老人改为
          60周岁及以上老人凭身份证/老年优待证免门票；<br />2、全国人民警察凭身份证和人民警察证免门票；<br />3、全国在职消防员凭本人消防证和身份证免门票。<br />（温馨提示：以上所有免门票政策在办理时，需出示本人身份证）</span
        >
      </div>
    </div>
    <div class="bh">
      <div class="bi">
        <p
          style="
            font-family: 微软雅黑, Microsoft YaHei;
            font-size: 21px;
            line-height: 40px;
            color: red;
          "
          id="bi"
        >
          景点简介
        </p>
        <p style="text-indent: 36px; line-height: 40px">
          <span style="font-family: 微软雅黑, Microsoft YaHei; font-size: 17px"
            >老君山古号景室山，因东周道家始祖老子归隐修炼于此而得名；是八百里伏牛山主峰，海拔2217米。老君山形成于十九亿年前的大陆造山运动，造就了其千姿百态、群峰竞秀，拔地通天、气势磅礴的景观；塑造了“华夏绿色心脏，世界地质奇观”的主题形象。</span
          >
        </p>
        <p style="text-indent: 35px; line-height: 40px">
          <span style="font-family: 微软雅黑, Microsoft YaHei; font-size: 17px"
            >老君山庙宇道观群历史悠久，道教文化源远流长，自北魏建老君庙以来，已成为中原香客朝拜中心，明万历十九年颁赐老君山道经诏谕，封为“天下名山”。已建成灵官殿、淋醋殿、救苦殿、老君庙、道德府等庙宇群落，且文物古迹众多。</span
          >
        </p>
        <p style="text-indent: 35px; line-height: 40px">
          <span style="font-family: 微软雅黑, Microsoft YaHei; font-size: 17px">
            老君山集自然景观与道教文化与一身，终以其雄险奇秀的神采成为中华大地的瑰宝。目前已开发建成了八大景区，138个景点，是旅游观光、祭拜朝圣、休闲度假、科考探险、动植物观赏的理想目的地。</span
          >
        </p>
      </div>
    </div>
    <div class="bl">
      <div class="bm">
        <p
          style="
            font-family: 微软雅黑, Microsoft YaHei;
            font-size: 21px;
            line-height: 40px;
            color: red;
          "
          id="bl"
        >
          游客评价
        </p>
        <p style="color: red; margin: 10px 0">345条评价</p>
        <div class="bn">
          <div v-for="item in 2" :key="item">
            <span>匿名用户</span>
            <span style="margin-left: 750px">2021-10-19 12:59:34</span>
            <p>
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </p>
            <p style="border-bottom: 1px solid rgb(231, 231, 231)">
              不错的景色
            </p>
          </div>
          <div v-for="item in 2" :key="item">
            <span>匿名用户</span>
            <span style="margin-left: 750px">2021-10-19 12:59:34</span>
            <p>
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </p>
            <p style="border-bottom: 1px solid rgb(231, 231, 231)">
              带着全家去的，看到了祖国的大好河山
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const self = this;
    return {
      laojunshan: [],
      input: "",
      activeName: "first",
      textarea: "",
      value: 3.7,
      dialogVisible: false,
      erlogVisible: false,

      zoom: 18,
      center: [111.659569, 33.779134],
      lng: 0,
      lat: 0,
      loaded: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    this.axios.get("/reserve").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.laojunshan = result.data.results;
    });
  },
};
</script>
<style scoped>
.amap-demo {
  height: 415px;
}
.zreo {
  max-width: 1300px;
  min-width: 1300px;
  margin: auto;
}
.one {
  height: 30px;
  background-color: rgb(231, 231, 231);
  /* position: relative; */
  overflow: hidden;
}
.two {
  /* position: absolute;
  margin-top: 7px;
  margin-left: 1000px; */
  float: right;
  margin-top: 7px;
  margin-right: 200px;
}
.three {
  height: 80px;
  background-color: white;
  margin-top: 20px;
}
.four {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.six {
  overflow: hidden;
  height: 30px;
  background-color: rgb(231, 231, 231);
}
.seven {
  border: 1px solid rgb(231, 231, 231);
  height: 450px;
  width: 1298px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.eight {
  height: 541px;
  width: 1300px;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.nine {
  width: 78%;
  height: 540px;
  border: 1px solid rgb(231, 231, 231);
}
.ten {
  width: 20%;
  height: 500px;
  border: 1px solid rgb(231, 231, 231);
  border-top: 3px solid red;
}
.biao {
  height: 40px;
  border-bottom: 1px solid rgb(231, 231, 231);
}
.biao > span > button {
  height: 40px;
  width: 150px;
  border: 0;
  background-color: white;
}
.biao > span > button > a {
  color: #000;
}
.biao > span > button:hover {
  background-color: rgb(243, 156, 25);
}
.biao > span > button > a:hover {
  color: white;
}
.eleven {
  height: 30px;
  border-bottom: 1px solid rgb(231, 231, 231);
}
.ba {
  height: 210px;
  border-bottom: 1px solid rgb(231, 231, 231);
}
.bb {
  height: 30px;
  border-bottom: 1px solid rgb(231, 231, 231);
  background-color: rgb(231, 231, 231);
  display: flex;
  justify-content: space-around;
}
.bb > span {
  margin: auto;
}
.bc {
  margin-left: 10px;
  margin-top: 15px;
}
.ba > .bc > .bd > button {
  width: 70px;
  height: 25px;
  background-color: red;
  border: 0;
}
.bd > button > a {
  color: white;
}
.be {
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  border-bottom: 1px solid grey;
}
.bf {
  margin-top: 20px;
  width: 78%;
  height: 500px;
  border: 1px solid rgb(231, 231, 231);
}
.bg {
  margin: 10px 10px;
}
.bh {
  margin-top: 20px;
  width: 78%;
  height: 330px;
  border: 1px solid rgb(231, 231, 231);
}
.bi {
  margin: 10px 10px;
}
.bj {
  margin-top: 20px;
  width: 78%;
  height: 500px;
  border: 1px solid rgb(231, 231, 231);
}
.bk {
  margin: 10px 10px;
}
.bl {
  margin: 20px 0;
  width: 78%;
  height: 500px;
  border: 1px solid rgb(231, 231, 231);
}
.bm {
  margin: 10px 10px;
}
.bn {
  height: 640px;
  line-height: 40px;
}
</style>